<template>
  <view class="index-container">
    <!-- 顶部渐变背景 -->
    <view class="header-bg">
      <view class="bg-circle circle-1"></view>
      <view class="bg-circle circle-2"></view>
      <view class="bg-circle circle-3"></view>
    </view>
    
    <!-- 顶部状态栏占位 -->
    <view class="status-bar"></view>
    
    <!-- 顶部搜索栏 -->
    <view class="search-header">
      <view class="search-wrapper">
        <u-search 
          v-model="searchKeyword"
          placeholder="搜索优质教员/热门科目"
          :show-action="true"
          action-text="搜索"
          bg-color="rgba(255, 255, 255, 0.95)"
          border-color="transparent"
          action-style="color: #5daf34; font-weight: 600;"
          @search="handleSearch"
          @custom="handleSearch"
          :custom-style="{ 
            borderRadius: '50rpx',
            boxShadow: '0 8rpx 32rpx rgba(93, 175, 52, 0.15)',
            border: 'none'
          }"
        ></u-search>
      </view>
      <view class="header-icon" @click="goToMessage">
        <u-icon name="bell" size="28" color="white"></u-icon>
        <u-badge :count="unreadCount" v-if="unreadCount > 0" :offset="[8, 8]" 
                 bg-color="#ff6b6b" color="white"></u-badge>
        <view class="icon-ripple"></view>
      </view>
    </view>
    
    <!-- 轮播图 -->
    <view class="banner-section">
      <swiper 
        class="banner-swiper" 
        :indicator-dots="true" 
        :autoplay="true" 
        :interval="4000" 
        :duration="800"
        indicator-color="rgba(255,255,255,0.4)"
        indicator-active-color="#5daf34"
        circular
        :indicator-style="'bottom: 20rpx;'"
      >
        <swiper-item v-for="(banner, index) in bannerList" :key="index">
          <view class="banner-item" @click="handleBannerClick(index)">
            <image :src="banner.image" class="banner-image" mode="aspectFill"></image>
            <view class="banner-gradient"></view>
            <view class="banner-content">
              <text class="banner-title">{{ banner.title }}</text>
              <text class="banner-subtitle">{{ banner.subtitle }}</text>
              <view class="banner-tag">精选推荐</view>
            </view>
          </view>
        </swiper-item>
      </swiper>
    </view>
    
  
    <!-- 最新需求 -->
    <view class="demand-section card">
      <view class="section-header">
        <view class="header-left">
          <view class="header-icon-bg demand-icon">
            <u-icon name="calendar-fill" size="26" color="#ff6b6b"></u-icon>
          </view>
          <view class="header-text">
            <text class="section-title">最新需求</text>
            <text class="section-subtitle">实时更新，抢单机会</text>
          </view>
        </view>
        <view class="more-btn" @click="goToDemandList">
          <text class="more-text">更多</text>
          <u-icon name="arrow-right" size="18" color="#ff6b6b"></u-icon>
        </view>
      </view>
      <view class="demand-list">
        <view 
          class="demand-item"
          v-for="demand in demandList"
          :key="demand.id"
          @click="goToDemandDetail(demand.id)"
        >
          <view class="demand-header">
            <text class="demand-title">{{ demand.title }}</text>
            <view class="demand-status">
              <text class="status-text">急需</text>
            </view>
          </view>
          <view class="demand-content">{{ demand.description }}</view>
          <view class="demand-footer">
            <view class="demand-tags">
              <u-tag 
                :text="demand.subject" 
                size="mini" 
                type="success"
                plain
                bg-color="#f0fff4"
                color="#52c41a"
              ></u-tag>
              <u-tag 
                :text="demand.grade" 
                size="mini" 
                type="warning"
                plain
                bg-color="#fffbf0"
                color="#fa8c16"
              ></u-tag>
            </view>
            <view class="demand-budget">
              <u-icon name="order" size="30" color="#5daf34"></u-icon>
              <text class="budget-text">¥{{ demand.budget }}/时</text>
            </view>
          </view>
          <view class="demand-time">
            <u-icon name="clock" size="14" color="#ccc"></u-icon>
            <text class="time-text">{{ formatTime(demand.createdAt) }}</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 浮动按钮 -->
    <view class="fab-container">
      <!-- AI助手按钮 -->
      <view class="fab-button ai-button" @click="goToAiChat">
        <u-icon name="server-fill" size="50" color="white"></u-icon>
        <view class="fab-ripple"></view>
        <view class="fab-badge">AI</view>
      </view>
      
      <!-- 消息按钮 -->
      <view class="fab-button message-button" @click="goToMessage">
        <u-icon name="chat" size="50" color="white"></u-icon>
        <view class="fab-ripple"></view>
        <u-badge :count="unreadCount" v-if="unreadCount > 0" :offset="[-5, 5]"></u-badge>
      </view>
    </view>
    
    <!-- 底部安全区域 -->
    <view class="safe-bottom"></view>
  </view>
</template>

<script>
import { getUserInfo, checkLogin } from '@/utils/auth'
import { getHotDemands } from '@/api/demand'

export default {
  data() {
    return {
      searchKeyword: '',
      unreadCount: 3,
      bannerList: [
        {
          image: 'https://picsum.photos/750/300?random=1',
          title: '优质教员，一对一辅导',
          subtitle: '专业认证，经验丰富'
        },
        {
          image: 'https://picsum.photos/750/300?random=2', 
          title: '安全可靠，放心选择',
          subtitle: '实名认证，背景审核'
        },
        {
          image: 'https://picsum.photos/750/300?random=3',
          title: '灵活时间，上门服务',
          subtitle: '时间自由，地点便利'
        }
      ],
      quickEntries: [
        {
          icon: 'search',
          text: '找教员',
          desc: '精选优质',
          bgColor: '#5daf34',
          bgColorEnd: '#7cb342',
          action: 'findTeacher',
          badge: 'HOT'
        },
        {
          icon: 'plus-circle',
          text: '发需求',
          desc: '快速匹配',
          bgColor: '#ff6b6b',
          bgColorEnd: '#ff8a80',
          action: 'publishDemand'
        },
        {
          icon: 'account-plus',
          text: '成为教员',
          desc: '加入我们',
          bgColor: '#4fc3f7',
          bgColorEnd: '#29b6f6',
          action: 'becomeTeacher',
          badge: 'NEW'
        },
        {
          icon: 'list',
          text: '我的订单',
          desc: '订单管理',
          bgColor: '#ba68c8',
          bgColorEnd: '#ab47bc',
          action: 'myOrders'
        },
        {
          icon: 'cog',
          text: '接口测试',
          desc: '调试模式',
          bgColor: '#ff9500',
          bgColorEnd: '#ffb74d',
          action: 'apiTest',
          badge: 'TEST'
        }
      ],
      statsData: [
        { icon: 'account-multiple', value: '1500', label: '优质教员', color: '#5daf34', progress: 85 },
        { icon: 'clipboard-check', value: '8600', label: '成功订单', color: '#ff6b6b', progress: 92 },
        { icon: 'book-open', value: '50', label: '学科覆盖', color: '#4fc3f7', progress: 78 },
        { icon: 'heart', value: '98', label: '满意度%', color: '#ba68c8', progress: 98 }
      ],
      teacherList: [
        {
          id: 1,
          name: '张老师',
          avatar: 'https://picsum.photos/150/150?random=4',
          school: '北京大学',
          subjects: ['数学', '物理'],
          description: '北京大学数学系硕士，5年教学经验',
          hourlyRate: 120,
          rating: 4.8,
          isOnline: true
        },
        {
          id: 2,
          name: '李老师', 
          avatar: 'https://picsum.photos/150/150?random=5',
          school: '清华大学',
          subjects: ['英语', '语文'],
          description: '英语专业八级，留学经验丰富',
          hourlyRate: 100,
          rating: 4.9,
          isOnline: false
        },
        {
          id: 3,
          name: '王老师', 
          avatar: 'https://picsum.photos/150/150?random=6',
          school: '中国人民大学',
          subjects: ['化学', '生物'],
          description: '化学博士，教学经验丰富',
          hourlyRate: 150,
          rating: 4.7,
          isOnline: true
        }
      ],
      demandList: [],
      loading: false
    }
  },
  
  onLoad() {
    this.loadData()
  },
  
  onShow() {
    this.loadData()
  },
  
  onPullDownRefresh() {
    this.loadData()
    setTimeout(() => {
      uni.stopPullDownRefresh()
    }, 1000)
  },
  
  methods: {
    async loadData() {
      try {
        console.log('加载首页数据')
        await this.loadHotDemands()
      } catch (error) {
        console.error('加载数据失败:', error)
      }
    },
    
    // 加载热门需求
    async loadHotDemands() {
      try {
        this.loading = true
        const res = await getHotDemands(5)
        if (res.code === 200) {
          this.demandList = res.data.map(item => ({
            ...item,
            description: item.contentMd || item.title,
            budget: item.budgetMax || item.budgetMin || 0
          }))
        }
      } catch (error) {
        console.error('加载热门需求失败:', error)
        uni.showToast({
          title: '加载失败',
          icon: 'error'
        })
      } finally {
        this.loading = false
      }
    },
    
    handleSearch() {
      if (!this.searchKeyword.trim()) {
        return
      }
      
      uni.navigateTo({
        url: `/pages/teacher/list?keyword=${encodeURIComponent(this.searchKeyword)}`
      })
    },
    
    handleBannerClick(index) {
      console.log('点击轮播图:', index)
    },
    
    handleQuickEntry(item) {
      switch (item.action) {
        case 'findTeacher':
          uni.switchTab({
            url: '/pages/teacher/list'
          })
          break
        case 'publishDemand':
          if (!checkLogin()) {
            this.showLoginModal()
            return
          }
          uni.navigateTo({
            url: '/pages/demand/publish'
          })
          break
        case 'becomeTeacher':
          if (!checkLogin()) {
            this.showLoginModal()
            return
          }
          uni.navigateTo({
            url: '/pages/teacher/apply'
          })
          break
        case 'myOrders':
          if (!checkLogin()) {
            this.showLoginModal()
            return
          }
          uni.navigateTo({
            url: '/pages/order/list'
          })
          break
        case 'apiTest':
          uni.navigateTo({
            url: '/pages/test/login-test'
          })
          break
      }
    },
    
    goToTeacherList() {
      uni.switchTab({
        url: '/pages/teacher/list'
      })
    },
    
    goToTeacherDetail(teacherId) {
      uni.navigateTo({
        url: `/pages/teacher/detail?id=${teacherId}`
      })
    },
    
    goToDemandList() {
      uni.switchTab({
        url: '/pages/demand/list'
      })
    },
    
    goToDemandDetail(demandId) {
      uni.navigateTo({
        url: `/pages/demand/detail?id=${demandId}`
      })
    },
    
    goToMessage() {
      uni.switchTab({
        url: '/pages/message/index'
      })
      
    },
    
    goToAiChat() {
      if (!checkLogin()) {
        this.showLoginModal()
        return
      }
      uni.navigateTo({
        url: '/pages/ai/chat'
      })
    },
    
    formatTime(time) {
      const now = new Date()
      const target = new Date(time)
      const diff = now - target
      
      if (diff < 60 * 1000) {
        return '刚刚'
      } else if (diff < 60 * 60 * 1000) {
        return Math.floor(diff / (60 * 1000)) + '分钟前'
      } else if (diff < 24 * 60 * 60 * 1000) {
        return Math.floor(diff / (60 * 60 * 1000)) + '小时前'
      } else {
        return Math.floor(diff / (24 * 60 * 60 * 1000)) + '天前'
      }
    },
    
    showLoginModal() {
      uni.showModal({
        title: '提示',
        content: '请先登录',
        showCancel: false,
        success: () => {
          uni.navigateTo({
            url: '/pages/auth/login'
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.index-container {
  background: linear-gradient(180deg, #f0f9ff 0%, #ffffff 50%, #f8fffe 100%);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

.header-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 600rpx;
  background: linear-gradient(135deg, #5daf34 0%, #7cb342 50%, #4fc3f7 100%);
  z-index: 0;
  overflow: hidden;
  
  .bg-circle {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    animation: float 20s infinite ease-in-out;
    
    &.circle-1 {
      width: 400rpx;
      height: 400rpx;
      top: -100rpx;
      left: -100rpx;
      animation-delay: 0s;
    }
    
    &.circle-2 {
      width: 300rpx;
      height: 300rpx;
      top: 200rpx;
      right: -80rpx;
      animation-delay: 2s;
    }
    
    &.circle-3 {
      width: 200rpx;
      height: 200rpx;
      top: 50rpx;
      left: 50%;
      animation-delay: 4s;
    }
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0) scale(1);
    opacity: 0.3;
  }
  50% {
    transform: translateY(-30rpx) scale(1.1);
    opacity: 0.5;
  }
}

.status-bar {
  height: var(--status-bar-height, 44rpx);
  position: relative;
  z-index: 10;
}

.search-header {
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx 30rpx;
  position: relative;
  z-index: 10;
  
  .search-wrapper {
    flex: 1;
    margin-right: 20rpx;
    position: relative;
    z-index: 2;
  }
  
  .header-icon {
    position: relative;
    width: 80rpx;
    height: 80rpx;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(20rpx);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    border: 2rpx solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
    
    .icon-ripple {
      position: absolute;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.2);
      animation: ripple 2s infinite;
    }
  }
}

@keyframes ripple {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

.banner-section {
  margin: -20rpx 30rpx 30rpx;
  position: relative;
  z-index: 1;
  
  .banner-swiper {
    height: 360rpx;
    border-radius: 32rpx;
    overflow: hidden;
    box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.15);
  }
  
  .banner-item {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 32rpx;
    overflow: hidden;
  }
  
  .banner-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1);
    transition: transform 0.5s ease;
  }
  
  .banner-gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 70%;
    background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.8) 100%);
  }
  
  .banner-content {
    position: absolute;
    bottom: 40rpx;
    left: 40rpx;
    right: 40rpx;
    color: white;
    
    .banner-title {
      display: block;
      font-size: 40rpx;
      font-weight: 700;
      margin-bottom: 12rpx;
      text-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.4);
      letter-spacing: 1rpx;
    }
    
    .banner-subtitle {
      font-size: 28rpx;
      opacity: 0.95;
      margin-bottom: 20rpx;
      text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
    }
    
    .banner-tag {
      display: inline-block;
      background: linear-gradient(135deg, rgba(93, 175, 52, 0.95), rgba(124, 179, 66, 0.95));
      padding: 10rpx 20rpx;
      border-radius: 24rpx;
      font-size: 24rpx;
      font-weight: 600;
      backdrop-filter: blur(10rpx);
      box-shadow: 0 4rpx 16rpx rgba(93, 175, 52, 0.3);
    }
  }
}

.card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20rpx);
  border-radius: 28rpx;
  box-shadow: 0 8rpx 40rpx rgba(0, 0, 0, 0.08);
  margin: 0 30rpx 30rpx;
  overflow: hidden;
  position: relative;
  border: 1rpx solid rgba(255, 255, 255, 0.8);
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6rpx;
    background: linear-gradient(90deg, #5daf34 0%, #7cb342 50%, #4fc3f7 100%);
    border-radius: 28rpx 28rpx 0 0;
  }
}

.section-title-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 40rpx;
  
  .section-title-line {
    flex: 1;
    height: 2rpx;
    background: linear-gradient(90deg, transparent, #e0e0e0, transparent);
  }
  
  .section-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin: 0 30rpx;
    position: relative;
  }
}

.quick-entry {
  padding: 35rpx 30rpx;
  
  .entry-grid {
    display: flex;
    justify-content: space-between;
    
    .entry-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      flex: 1;
      position: relative;
      
      .entry-icon-wrapper {
        position: relative;
        margin-bottom: 18rpx;
        
        .entry-icon {
          width: 120rpx;
          height: 120rpx;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.15);
          transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
          position: relative;
          overflow: hidden;
          border: 3rpx solid rgba(255, 255, 255, 0.5);
          
          .icon-glow {
            position: absolute;
            top: 10%;
            left: 10%;
            width: 50%;
            height: 50%;
            background: rgba(255, 255, 255, 0.4);
            border-radius: 50%;
            filter: blur(15rpx);
          }
          
          &:active {
            transform: scale(0.90);
          }
        }
        
        .entry-badge {
          position: absolute;
          top: -6rpx;
          right: -6rpx;
          background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
          border-radius: 24rpx;
          padding: 8rpx 14rpx;
          box-shadow: 0 6rpx 16rpx rgba(255, 107, 107, 0.4);
          z-index: 1;
          
          .badge-text {
            font-size: 20rpx;
            color: white;
            font-weight: bold;
            letter-spacing: 1rpx;
          }
        }
      }
      
      .entry-text {
        font-size: 26rpx;
        color: #333;
        font-weight: 600;
        margin-bottom: 6rpx;
        letter-spacing: 0.5rpx;
      }
      
      .entry-desc {
        font-size: 22rpx;
        color: #999;
      }
    }
  }
}

.stats-section {
  padding: 35rpx 30rpx;
  
  .stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20rpx;
    
    .stat-item {
      text-align: center;
      padding: 28rpx 8rpx;
      border-radius: 20rpx;
      background: linear-gradient(135deg, #fafbfc 0%, #f5f7fa 100%);
      position: relative;
      overflow: hidden;
      transition: all 0.3s ease;
      border: 1rpx solid rgba(0, 0, 0, 0.03);
      
      &:active {
        transform: translateY(-4rpx);
        box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
      }
      
      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3rpx;
        background: var(--stat-color, #5daf34);
      }
      
      .stat-icon {
        width: 56rpx;
        height: 56rpx;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 16rpx;
        transition: transform 0.3s ease;
      }
      
      .stat-number {
        display: block;
        font-size: 36rpx;
        font-weight: 800;
        color: #333;
        margin-bottom: 8rpx;
        letter-spacing: 0.5rpx;
      }
      
      .stat-label {
        font-size: 22rpx;
        color: #666;
        margin-bottom: 14rpx;
      }
      
      .stat-progress {
        height: 8rpx;
        background: rgba(0, 0, 0, 0.05);
        border-radius: 4rpx;
        overflow: hidden;
        
        .progress-bar {
          height: 100%;
          border-radius: 4rpx;
          transition: width 1.5s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
      }
    }
  }
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
  
  .header-left {
    display: flex;
    align-items: center;
    
    .header-icon-bg {
      width: 68rpx;
      height: 68rpx;
      background: linear-gradient(135deg, #5daf34, #7cb342);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 18rpx;
      box-shadow: 0 8rpx 24rpx rgba(93, 175, 52, 0.25);
      
      &.demand-icon {
        background: linear-gradient(135deg, #ff6b6b, #ff8a80);
        box-shadow: 0 8rpx 24rpx rgba(255, 107, 107, 0.25);
      }
    }
    
    .header-text {
      .section-title {
        display: block;
        font-size: 34rpx;
        font-weight: 700;
        color: #333;
        margin-bottom: 6rpx;
        letter-spacing: 0.5rpx;
      }
      
      .section-subtitle {
        font-size: 24rpx;
        color: #999;
      }
    }
  }
  
  .more-btn {
    display: flex;
    align-items: center;
    padding: 14rpx 24rpx;
    background: linear-gradient(135deg, #f8f9fa, #f0f2f5);
    border-radius: 24rpx;
    transition: all 0.3s ease;
    
    &:active {
      transform: scale(0.95);
      background: linear-gradient(135deg, #f0f2f5, #e8eaed);
    }
    
    .more-text {
      font-size: 26rpx;
      color: #5daf34;
      font-weight: 600;
      margin-right: 8rpx;
    }
  }
}

.recommend-section {
  padding: 30rpx;
  
  .teacher-scroll {
    margin: 0 -30rpx;
    padding: 0 30rpx;
  }
  
  .teacher-list {
    display: flex;
    gap: 20rpx;
  }
  
  .teacher-item {
    .teacher-card {
      width: 280rpx;
      background: #fafafa;
      border-radius: 20rpx;
      padding: 24rpx;
      border: 2rpx solid #f0f0f0;
      transition: all 0.3s ease;
      
      &:active {
        transform: translateY(-4rpx);
        box-shadow: 0 8rpx 32rpx rgba(93, 175, 52, 0.15);
        border-color: #5daf34;
      }
      
      .teacher-header {
        display: flex;
        align-items: center;
        margin-bottom: 20rpx;
        
        .teacher-avatar {
          position: relative;
          margin-right: 20rpx;
          
          .online-status {
            position: absolute;
            right: -2rpx;
            bottom: -2rpx;
            width: 20rpx;
            height: 20rpx;
            background: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            
            .online-dot {
              width: 12rpx;
              height: 12rpx;
              background: #52c41a;
              border-radius: 50%;
              animation: pulse 2s infinite;
            }
          }
        }
        
        .teacher-basic {
          flex: 1;
          
          .teacher-name {
            font-size: 28rpx;
            font-weight: bold;
            color: #333;
            margin-bottom: 8rpx;
          }
          
          .teacher-school {
            display: flex;
            align-items: center;
            font-size: 22rpx;
            color: #666;
            
            .school-text {
              margin-left: 6rpx;
            }
          }
        }
      }
      
      .teacher-rating {
        display: flex;
        align-items: center;
        margin-bottom: 15rpx;
        
        .rating-text {
          font-size: 22rpx;
          color: #666;
          margin-left: 8rpx;
        }
      }
      
      .teacher-tags {
        display: flex;
        gap: 8rpx;
        margin-bottom: 15rpx;
        flex-wrap: wrap;
      }
      
      .teacher-price {
        display: flex;
        align-items: center;
        justify-content: space-between;
        
        .price-label {
          font-size: 22rpx;
          color: #999;
        }
        
        .price {
          font-size: 32rpx;
          font-weight: bold;
          color: #5daf34;
        }
      }
    }
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.demand-section {
  padding: 35rpx 30rpx;
  
  .demand-list {
    .demand-item {
      background: linear-gradient(135deg, #fafbfc 0%, #ffffff 100%);
      border-radius: 20rpx;
      padding: 28rpx;
      margin-bottom: 24rpx;
      border-left: 5rpx solid #ff6b6b;
      position: relative;
      transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
      box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
      
      &:last-child {
        margin-bottom: 0;
      }
      
      &:active {
        transform: translateX(6rpx);
        box-shadow: 0 8rpx 32rpx rgba(255, 107, 107, 0.2);
        border-left-width: 8rpx;
      }
      
      .demand-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16rpx;
        
        .demand-title {
          font-size: 30rpx;
          font-weight: 700;
          color: #333;
          flex: 1;
          letter-spacing: 0.5rpx;
        }
        
        .demand-status {
          .status-text {
            background: linear-gradient(135deg, #ff6b6b, #ff8a80);
            color: white;
            padding: 8rpx 16rpx;
            border-radius: 16rpx;
            font-size: 22rpx;
            font-weight: 600;
            box-shadow: 0 4rpx 12rpx rgba(255, 107, 107, 0.25);
          }

        }

      }
      
      .demand-content {
        font-size: 26rpx;
        color: #666;
        line-height: 1.7;
        margin-bottom: 20rpx;
      }
      
      .demand-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 14rpx;
        
        .demand-tags {
          display: flex;
          gap: 10rpx;
        }
        
        .demand-budget {
          display: flex;
          align-items: center;
          
          .budget-text {
            font-size: 28rpx;
            font-weight: 700;
            color: #5daf34;
            margin-left: 6rpx;
          }
        }
      }
      
      .demand-time {
        display: flex;
        align-items: center;
        
        .time-text {
          font-size: 22rpx;
          color: #ccc;
          margin-left: 6rpx;
        }
      }
    }
  }
}

.fab-container {
  position: fixed;
  right: 30rpx;
  bottom: 200rpx;
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 24rpx;
  
  .fab-button {
    width: 112rpx;
    height: 112rpx;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 16rpx 48rpx rgba(93, 175, 52, 0.35);
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    
    &.ai-button {
      background: linear-gradient(135deg, #5daf34, #7cb342);
      
      .fab-badge {
        position: absolute;
        top: -2rpx;
        right: -2rpx;
        background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
        color: white;
        font-size: 22rpx;
        font-weight: bold;
        padding: 6rpx 12rpx;
        border-radius: 24rpx;
        box-shadow: 0 6rpx 16rpx rgba(255, 107, 107, 0.5);
        z-index: 1;
      }
    }
    
    &.message-button {
      background: linear-gradient(135deg, #4fc3f7, #29b6f6);
      box-shadow: 0 16rpx 48rpx rgba(79, 195, 247, 0.35);
    }
    
    .fab-ripple {
      position: absolute;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.15);
      animation: fab-ripple 3s infinite;
    }
    
    &:active {
      transform: scale(0.88);
    }
  }
}

@keyframes fab-ripple {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}

.safe-bottom {
  height: env(safe-area-inset-bottom);
  min-height: 40rpx;
}
</style> </style> 
</style> 
